|
SVG的显示
通过网上方式都没成功,引入路径，总是失败，经过多次的测试终于发现是svg的加载出了问题，记录一下，方便以后的使用
SVG的加载
工具
初始化svg加载工具
"svg-sprite-loader": "^6.0.11"
配置
vue.config.js中配置svg文件的加载
module.exports ={
chainWebpack(config) {
config.module.rules.delete("svg"); // 重点：删除默认配置中处理svg,
config.module.rule('svg-sprite-loader').test(/\.svg$/)
.include.add(resolve('src/assets/svg')) // 处理svg目录
.end().use('svg-sprite-loader').loader('svg-sprite-loader')
.options({//被加载svg 元素的名字变为svg-[name]
symbolId: 'svg-[name]'
})
}
}
一定要注意在chainWebpack中配置的时候该配置是一直被执行的，并不是只有生产环境才执行，本人在设置的时候不小心将配置放在了 if (PROD) 条件中，导致本地调试的时候，一直无法正常加载，打印import的svg文件，打印的是加载到的是svg文件路径与文件名的hash组成，注意这个就是因为上述配置没有生效
import detail from '@/assets/svg/detail.svg';//加载单个svg
正常svg被正常加载，打印的是以下内容:
展示svg组件
import { defineComponent } from 'vue';
export default defineComponent({
name: 'icon-svg',
props: {
svgname: {
type: String,
required: true,
},
},
})
/*
自定义 svg 的显示
使用说明：
1、下载或制作的svg文件，放在/src/assets/svg目录下
2、项目根据/src/assets/svg/svgo.yml配置自动压缩精简svg，也可以独立运行 npm run svgo 压缩精简svg
3、使用Demo：
-----template start-----
----template end----
----script start ----
import IconSvg from '@/components/icon-svg.vue'
import { defineComponent } from "vue";
import detail from '@/assets/svg/detail.svg';//加载单个svg
export default defineComponent({
components: {
'icon-svg': IconSvg
},
setup() {
let singleName=detail.id;
return {
singleName,
}
}
})
----script end ----
*/
.svg-icon {
width: 10em;
height: 10em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
加载一个文件夹中所有svg文件
/**
* 用于批量加载指定文件夹下的svg文件
* 本地src/assets/svg 下svg文件
*/
const localSvg = () => {
try {
const requireContext: __WebpackModuleApi.RequireContext =
require.context('@/assets/svg',false,/\.svg$/)
const requireAll = requireContext => requireContext
.keys().map(fileName=>requireContext(fileName).default);
// 加载目录下的所有的 svg 文件
let svgs= requireAll(requireContext);
return svgs
} catch (error) {
console.error(error)
}
}
export { localSvg }
加载svg实例
import { defineComponent, onMounted, reactive, ref } from 'vue';
import IconSvg from '@/components/icon-svg.vue';
import { localSvg } from '@/config/svg';//批量加载svg时单独使用
import detail from '@/assets/svg/detail.svg';//加载单个svg
export default defineComponent({
name: 'svg-view',
components: {
'icon-svg': IconSvg,
},
setup() {
let svgList = localSvg()
let singleName=detail.id;
return {
singleName,
svgList
}
},
})
.svg-sg{
width: 100px;
height:100px;
color: red;
display: inline-block;
}
vue-svg-loader方式
该方式是ant-design-vue官方提供的方式，但是测试后发现，未能成功实现展现，并且该插件已经很久没有更新了，现在的最新版本是0.16.0,vue-svg-loader测试方式启动都未成功，存在各种版本问题，所以等以后测试成功之后在补充吧
const svgRule = config.module.rule('svg');
// 清空默认svg规则
svgRule.uses.clear();
//针对svg文件添加vue-svg-loader规则
svgRule.use('vue-svg-loader').loader('vue-svg-loader');
|